import React from 'react'
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'
import { Form, Input, Button } from 'antd'
export default class Editor extends React.Component {
  state = {
    editorState: BraftEditor.createEditorState(''), // 设置编辑器初始内容
    outputHTML: ''
  }
  componentDidMount () {
    this.isLivinig = true
  }

  componentWillUnmount () {
    this.isLivinig = false
  }
  handleChange = (editorState) => {
    this.setState({
      editorState: editorState,
      outputHTML: editorState.toHTML()
    })
  }

  render () {
    const { editorState, outputHTML } = this.state

    return (
      <div>

        <Form
          onFinish = { (values) => {
            // console.log(values)
            const { proname } = values
            const desc = outputHTML
            console.log({
              proname,
              desc
            })
          }}
          initialValues={{
            proname: '',
            desc: ''
          }}
        >
          <Form.Item
          name="proname">
            <Input placeholder="产品名称"></Input>
          </Form.Item>
          <Form.Item
          name="desc">
             <>
             <div className="editor-wrapper">
              <BraftEditor
                value={editorState}
                onChange={this.handleChange}
              />
            </div>
            <Input hidden placeholder="产品描述" value = { outputHTML }></Input>
             </>
          </Form.Item>

          <Button htmlType="submit">提交</Button>
        </Form>

      </div>
    )
  }
}
